這篇文章是接續昨天的部分
今天主要是欣賞一下程式碼
非常簡潔有力(資訊好少)
https://pure-admin-doc.vercel.app/pages/pure-admin-table/#%F0%9F%9A%80-%E7%89%B9%E6%80%A7
有找到pagination
分頁系統的參數註解\pure-admin-thin\node_modules\.pnpm\@pureadmin+table@1.2.0_element-plus@2.2.16\node_modules\@pureadmin\table\dist\types\index.d.ts
作者封裝了很多套件真的很厲害!
但是部分套件沒有特別花時間撰寫詳細的說明文件,今天實際使用@pureadmin/table
傳參數<PaginationProps>
有遇到 bug (例如: pagination.layout = [1, 5, 10, 15, 20]
畫面的分頁直接消失,也沒有錯誤資訊)
筆者認為使用原生的 element-plus 組件比較好掌控,網路上資源也比較多!比較改的動。
<TableProBar>
/@/components/ReTable
<PureTable>
@pureadmin/table
可以點選齒輪把"勾選列"功能打開
<!-- \pure-admin-thin\src\views\system\role\index.vue -->
<script setup lang="ts">
import { useColumns } from "./columns";
import { getRoleList } from "/@/api/system";
import { reactive, ref, onMounted } from "vue";
import { TableProBar } from "/@/components/ReTable";
import { PaginationProps } from "@pureadmin/table";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
//一定要引入
import { PureTable } from "@pureadmin/table";
defineOptions({
name: "Role"
});
//打 API 去拿的 Table 資料 [{},{},...]
let dataList = ref([]);
//紀錄 loading 狀態
let loading = ref(true);
//等於 Table 的 header, 放在另一隻檔案 (沒有用到 store)
const { columns } = useColumns();
// 分頁功能 需要的變數
const pagination = reactive<PaginationProps>({
//預設每頁顯示多少筆
defaultPageSize: 1,
//預設在哪一頁
defaultCurrentPage: 1,
//總共多少筆資料
total: 0,
//每頁顯示多少筆
pageSize: 1,
//當前頁數在哪一頁
currentPage: 1
});
//打 API 拿資料後,更新 Table 相關變數
async function onSearch() {
loading.value = true;
let { data } = await getRoleList();
dataList.value = data.list;
pagination.total = data.total;
setTimeout(() => {
loading.value = false;
}, 500);
}
// console 印出目前在第幾頁
function handleCurrentChange(val: number) {
console.log(`current page: ${val}`);
}
//console 印出目前 pagination 相關參數
function handleSizeChange(val: number) {
console.log(`${val} items per page`);
console.log(
pagination.total,
pagination.pageSize,
pagination.currentPage
);
}
//勾選列功能打開後, console 能印出勾選資料
function handleSelectionChange(val) {
console.log("handleSelectionChange", val);
}
onMounted(() => {
onSearch();
});
</script>
<template>
<div class="main">
<TableProBar
title="角色列表"
:loading="loading"
:dataList="dataList"
@refresh="onSearch"
>
<template #buttons>
<el-button type="primary" :icon="useRenderIcon('add')">
新增角色
</el-button>
</template>
<template v-slot="{ size, checkList }">
<PureTable
border
align="center"
showOverflowTooltip
table-layout="auto"
size="small"
:data="dataList"
:columns="columns"
:checkList="checkList"
:pagination="pagination"
:paginationSmall="size === 'small' ? true : false"
:header-cell-style="{
background: 'var(--el-table-row-hover-bg-color)',
color: 'var(--el-text-color-primary)'
}"
@selection-change="handleSelectionChange"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</template>
</TableProBar>
</div>
</template>
handleSelectionChange()
//\pure-admin-thin\src\views\system\role\columns.tsx
import { ref } from "vue";
import dayjs from "dayjs";
//引入 elemt-plus 對話框
import { ElMessageBox } from "element-plus";
//引入 作者客製化封裝的 表格內部開關 和 簡易提示框
import { Switch, message } from "@pureadmin/components";
export function useColumns() {
const switchLoadMap = ref({});
//表格 header 可以客製化渲染內容
const columns = ref([
{
type: "selection",
width: 55,
hide: ({ checkList }) => !checkList.includes("勾选列")
},
{
label: "序号",
type: "index",
width: 70,
hide: ({ checkList }) => !checkList.includes("序号列")
},
{
label: "角色编号",
prop: "id"
},
{
label: "角色名称",
prop: "name"
},
{
label: "角色标识",
prop: "code"
},
{
label: "角色类型",
prop: "type",
cellRenderer: ({ row, props }) => (
<el-tag
size={props.size}
type={row.type === 1 ? "danger" : ""}
effect="plain"
>
{row.type === 1 ? "内置" : "自定义"}
</el-tag>
)
},
{
label: "显示顺序",
prop: "sort"
},
{
label: "状态",
prop: "status",
width: 130,
cellRenderer: scope => (
<Switch
size={scope.props.size === "small" ? "small" : "default"}
loading={switchLoadMap.value[scope.index]?.loading}
v-model:checked={scope.row.status}
checkedValue={1}
unCheckedValue={0}
checked-children="已开启"
un-checked-children="已关闭"
onChange={() => onChange(scope)}
/>
)
},
{
label: "创建时间",
width: 180,
prop: "createTime",
formatter: ({ createTime }) =>
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
}
]);
//在label: "状态" 欄位變更後會呼叫此方法
function onChange({ row, index }) {
ElMessageBox.confirm(
`确认要<strong>${
row.status === 0 ? "停用" : "启用"
}</strong><strong style='color:var(--el-color-primary)'>${
row.name
}</strong>角色吗?`,
"系统提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
dangerouslyUseHTMLString: true,
draggable: true
}
)
.then(() => {
switchLoadMap.value[index] = Object.assign(
{},
switchLoadMap.value[index],
{
loading: true
}
);
setTimeout(() => {
switchLoadMap.value[index] = Object.assign(
{},
switchLoadMap.value[index],
{
loading: false
}
);
message.success("已成功修改角色状态");
}, 300);
})
.catch(() => {
row.status === 0 ? (row.status = 1) : (row.status = 0);
});
}
return {
columns
};
}
onChange()
因為我們是使用假資料 (mock)
要去下圖處新增資料